<template>

<div>
      <el-select v-model="dataPackageId" clearable placeholder="请选择数据包" @change="dataPackageOnChanged($event)">
      <el-option
        v-for="item in dataPackageList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

      <!-- <el-dropdown>
        <el-button type="primary">
          去分享<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->


      <!-- <el-form-item label="去分享" > -->

      <el-select v-model="selectedUser" multiple @change="userOnChanged($event)" collapse-tags style="margin-left: 20px;" placeholder="将面板分享给他人吧！">
        <el-option
          v-for="item in userList"
          :key="item.value"
          :label="item.label"
         
          :value="item.value">
        </el-option>
      </el-select>

      <el-button type="primary" @click="onShared" round>分享</el-button>


      <div >
          <Moveable 
            style="width:400px;height:400px;"
            class="moveable"
            v-bind="moveable"
            @drag="handleDrag"
            @resize="handleResize"
            @scale="handleScale"
            @scaleEnd="scaleEnd"
            @rotate="handleRotate"
            @warp="handleWarp"
          >

             <div id="J_chartPieBox" style="width:400px;height:400px" class="chart-box"></div>

          </Moveable>
      </div>

           <!-- <Moveable
        class="moveable"
        v-bind="moveable"
        @drag="handleDrag"
        @resize="handleResize"
        @scale="handleScale"
        @rotate="handleRotate"
        @warp="handleWarp"
      >
        <span>Vue Moveable</span>
      </Moveable> -->
</div>


</template>
<script>
import Moveable from 'vue-moveable';

export default {
  name: 'app',
  components: {
    Moveable,
  },
  data: () => ({
     chartLine: null,
     chartPie: null,
      dataPackageList:[],
      dataPackageId: '',
      selectedUser: [],
      userList: [],
      panelId: '',
      posX: 0,
      timeIndex: 1,
      posY: 0,
      panelWidth: 400,
      panelHeight: 400,
     moveable: {
      draggable: true,
      throttleDrag: 0,
      resizable: false,
      throttleResize: 1,
      keepRatio: false,
      scalable: true,
      throttleScale: 0,
 
      rotatable: false,
      throttleRotate: 0,
      pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
      origin: false,
    }
  }),

    activated () {
        // console.log("activated----");
        // this.$http({
        //   url: this.$http.adornUrl('/report/connection/connections'),
        //   method: 'get',
        //   params: this.$http.adornParams(
        //   )
        // }).then(({data}) => {
        //       //this.connectionList=data.connectionList;
        // })

        let userId=this.$store.state.user.id;
        this.$http({
          url: this.$http.adornUrl(`/report/datapackage/list/${userId}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
              this.dataPackageList=data.dataPackageList;
              this.dataPackageId=data.dataPackageList[0].value;
              this.dataPackageOnChanged (this.dataPackageId);
        })

        this.getAllUsers();

    },


  created(){
       //console.log("created---"+this.dataPackageId)
          // this.$http({
          //   url: this.$http.adornUrl(`/report/panelpackage/panels/${this.dataPackageId}`),
          //   method: 'get',
          //   params: this.$http.adornParams()
          // }).then(({data}) => {
          //   if (data && data.code === 0) {
          //     this.dataForm.name = data.businessPackage.name
          //     this.dataForm.createrId = data.businessPackage.createrId
          //       this.dataForm.description = data.businessPackage.description
          //   }
          // })



  },
    mounted () {
      console.log("mounted---")

     // this.initChartLine()
    },


  methods: {

    onShared(){
      console.log("this.sss",this.posX)


      this.$http({
              url: this.$http.adornUrl(`/report/panelpackage/share`),
              method: 'post',
              data: this.$http.adornData({
                'panelId': this.panelId,
                'userIds': this.selectedUser,
                "xpos": this.posX,
                "ypos": this.posY,
                "width": 400,
                "height": 400
               // 'connectUrl': this.dataForm.connectUrl,
                //'encode': this.dataForm.encode
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })



    },

      userOnChanged(e){
        this.selectedUser=e;
      },

    getAllUsers(){
        this.$http({
          url: this.$http.adornUrl('/report/connection/users'),
          method: 'get',
          params: this.$http.adornParams(
          )
        }).then(({data}) => {
              this.userList=data.userList;
        })
      },

      dataPackageOnChanged (val) {
        this.dataPackageId = val;
        console.log(" this.bussinessPackageId "+ this.dataPackageId )

          this.$http({
            url: this.$http.adornUrl(`/report/panelpackage/panels/${this.dataPackageId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
              console.log(data.panelList.length)
              if(data.panelList.length>0){
              //  debugger;
               let panelData= data.panelList[0];
               this.panelId=panelData.id;

               console.log("this.panelId   "+this.panelId);

                let myHorizontal=[];
                let myVertical=[];

            
                this.$http({
                  url: this.$http.adornUrl(`/report/datapackage/render`),
                  method: 'post',
                  data: this.$http.adornData({
                    'horizontal': panelData.horizontalfield,
                    'vertical': panelData.verticalfield,
                    'dataId': this.dataPackageId
                  }
                  )
                }).then(({data}) => {
                  data.columns.forEach((item,index)=>{
                    myHorizontal.push(item[panelData['horizontalfield']]+'月');
                    myVertical.push(item[panelData['verticalfield']]);
                  })

              console.log("horizontalField: ",panelData['horizontalfield'])
                console.log("verticalField: ",panelData['verticalfield'])
                  console.log("myHorizontal: ",myHorizontal)
                  console.log("myVertical: ",myVertical)
                  
                    this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))

                    this.chartPie.setOption({
                        title: { text: '在Vue中使用echarts' },
                        tooltip: {},
                        xAxis: {
                            data: myHorizontal
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: myVertical
                        }]
                    })
                    window.addEventListener('resize', () => {
                      this.chartPie.resize()
                    })


                })




                  // debugger;

                    // this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))

                    // this.chartPie.setOption({
                    //     title: { text: '在Vue中使用echarts' },
                    //     tooltip: {},
                    //     xAxis: {
                    //         data: myHorizontal
                    //     },
                    //     yAxis: {},
                    //     series: [{
                    //         name: '销量',
                    //         type: 'bar',
                    //         data: myVertical
                    //     }]
                    // })
                    // window.addEventListener('resize', () => {
                    //   this.chartPie.resize()
                    // })


              }
            // if (data && data.code === 0) {
            //   this.dataForm.name = data.businessPackage.name
            //   this.dataForm.createrId = data.businessPackage.createrId
            //     this.dataForm.description = data.businessPackage.description
            // }
          })

      },

      // 折线图
      initChartLine () {
        var option = {
          'title': {
            'text': '折线图堆叠'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': '邮件营销',
              'type': 'line',
              'stack': '总量',
              'data': [ 120, 132, 101, 134, 90, 230, 210 ]
            },
            {
              'name': '联盟广告',
              'type': 'line',
              'stack': '总量',
              'data': [ 220, 182, 191, 234, 290, 330, 310 ]
            }
          ]
        }
        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      },

    handleDrag({ target, transform,left, top  }) {
      console.log('onDrag left, top', transform);
      console.log('onDrag left, top1111', target.transition);
       console.log('onDrag left, left', left );
        console.log('onDrag left, top', top );
      target.style.transform = transform;

      this.posX=left;
      this.posY=top;

    },
    handleResize({
      target, width, height, delta,
    }) {
      console.log('onResize', width, height);
      delta[0] && (target.style.width = `${width}px`);
      delta[1] && (target.style.height = `${height}px`);
    },
    scaleEnd({ currentTarget }){
      console.log("222",currentTarget)
    },
    handleScale({ target, transform, scale }) {
      console.log("scale-------",scale)
      target.style.transform = transform;
      this.panelWidth=this.panelWidth*scale[0];
      this.panelHeight=this.panelHeight*scale[1];
      console.log("timeIndex---",this.timeIndex)
      console.log("width---",this.panelWidth)
      console.log("height---",this.panelHeight)

    },
    handleRotate({ target, dist, transform }) {
      console.log('onRotate', dist);
      target.style.transform = transform;
    },
    handleWarp({ target, transform }) {
      console.log('onWarp', transform);
      target.style.transform = transform;
    },
    handlePinch({ target }) {
      console.log('onPinch', target);
    },
  }
}
</script>

<style>
.container {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* .moveable {
  font-family: "Roboto", sans-serif;
  position: relative;
  width: 300px;
  height: 200px;
  text-align: center;
  font-size: 40px;
  margin: 0 auto;
  font-weight: 100;
  letter-spacing: 1px;
} */
</style>